<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
    <jsp:include page="../frame.jsp"></jsp:include>
    <script src="/yibinu_certificate/static/assets/exif/exif.js"></script>
    <link href="/yibinu_certificate/static/assets/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet">
    <script src="/yibinu_certificate/static/assets/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script src="/yibinu_certificate/static/assets/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <div id="page-wrapper" >
        <div class="header">
            <h1 class="page-header">
                学生获奖信息管理
            </h1>
            <ol class="breadcrumb">
                <li><a href="/yibinu_certificate/index">首页</a></li>
                <li><a href="/yibinu_certificate/student/list">学生获奖信息管理</a></li>
                <li class="active">
                    <c:if test="${not empty student}">修改学生获奖信息</c:if>
                    <c:if test="${empty student}">新增学生获奖信息</c:if>
                </li>
            </ol>

        </div>

        <div id="page-inner">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-action">
                            填写学生获奖获奖信息信息
                        </div>
                        <div class="card-content">
                            <form class="col s12" action="#">
                                <div class="row">
                                    <c:choose>
                                        <c:when test="${user.role == 'student'}">
                                            <div class="input-field col s12">
                                                <input name="id" type="hidden" value="${prizeInfo.id}">
                                                <input name="studentId" type="hidden" value="${user.student.id}">
                                                <input placeholder="请输入指导教师" id="lead_tacher" type="text" class="validate" name="leadTeacher" value="${prizeInfo.leadTeacher}">
                                                <label for="lead_tacher">指导教师</label>
                                            </div>
                                            <div class="input-field col s12">
                                                <label for="prizeDetails" style="font-size: 0.8rem;">获奖详情</label>
                                                <input id="prizeDetails" type="text" placeholder="请输入获奖详情" class="validate" name="prizeDetails" value="${prizeInfo.prizeDetails}"/>
                                            </div>
                                            <div class="input-field col s12">
                                                <label for="certificate_type" style="font-size: 0.8rem;">证书类型</label>
                                                <br>
                                                <br>
                                                <select class="form-control" id="certificate_type" name="certificateType">
                                                    <c:forEach items="${certificateTypes}" var="c" varStatus="s">
                                                        <c:choose>
                                                            <c:when test="${s.index == 0}">
                                                                <option value="${c.certificateType}" selected="selected">${c.certificateType}</option>
                                                            </c:when>
                                                            <c:otherwise>
                                                                <option value="${c.certificateType}">${c.certificateType}</option>
                                                            </c:otherwise>
                                                        </c:choose>

                                                    </c:forEach>
                                                </select>
                                            </div>
                                            <div class="input-field col s12">
                                                <label for="prize_name" style="font-size: 0.8rem;">奖项名称</label>
                                                <br>
                                                <br>
                                                <select class="form-control" id="prize_name" name="prizeName">
                                                    <c:forEach items="${prizeNames}" var="p" varStatus="s">
                                                        <c:choose>
                                                            <c:when test="${s.index == 0}">
                                                                <option value="${p.prizeName}" selected="selected">${p.prizeName}</option>
                                                            </c:when>
                                                            <c:otherwise>
                                                                <option value="${p.prizeName}">${p.prizeName}</option>
                                                            </c:otherwise>
                                                        </c:choose>

                                                    </c:forEach>
                                                </select>
                                            </div>
                                            <div class="input-field col s12">
                                                <label for="prize_grade" style="font-size: 0.8rem;">获奖等级</label>
                                                <br>
                                                <br>
                                                <select class="form-control" id="prize_grade" name="prizeGrade">
                                                    <c:forEach items="${prizeGrades}" var="p" varStatus="s">
                                                        <c:choose>
                                                            <c:when test="${s.index == 0}">
                                                                <option value="${p.prizeGrade}" selected="selected">${p.prizeGrade}</option>
                                                            </c:when>
                                                            <c:otherwise>
                                                                <option value="${p.prizeGrade}">${p.prizeGrade}</option>
                                                            </c:otherwise>
                                                        </c:choose>

                                                    </c:forEach>
                                                </select>
                                            </div>
                                            <div class="input-field col s12">
                                                <label for="prize_level" style="font-size: 0.8rem;">获奖级别</label>
                                                <br>
                                                <br>
                                                <select class="form-control" id="prize_level" name="prizeLevel">
                                                    <c:forEach items="${prizeLevels}" var="p" varStatus="s">
                                                        <c:choose>
                                                            <c:when test="${s.index == 0}">
                                                                <option value="${p.prizeLevel}" selected="selected">${p.prizeLevel}</option>
                                                            </c:when>
                                                            <c:otherwise>
                                                                <option value="${p.prizeLevel}">${p.prizeLevel}</option>
                                                            </c:otherwise>
                                                        </c:choose>
                                                    </c:forEach>
                                                </select>
                                            </div>
                                        </c:when>
                                        <c:otherwise>
                                            <div class="input-field col s12">
                                                <input name="id" type="hidden" value="${prizeInfo.id}">
                                                <input placeholder="请输入指导教师" id="lead_tacher" type="text" class="validate" name="leadTeacher" value="${prizeInfo.leadTeacher}">
                                                <label for="lead_tacher">指导教师</label>
                                            </div>
                                            <div class="input-field col s12">
                                                <label for="prizeDetails" style="font-size: 0.8rem;">获奖详情</label>
                                                <input id="prizeDetails" type="text" placeholder="请输入获奖详情" class="validate" name="prizeDetails" value="${prizeInfo.prizeDetails}"/>
                                            </div>
                                            <div class="input-field col s12">
                                                <label for="student" style="font-size: 0.8rem;">选择学生</label>
                                                <br>
                                                <br>
                                                <select class="form-control" id="student" name="studentId">
                                                    <c:forEach items="${students}" var="s" varStatus="status">
                                                        <c:choose>
                                                            <c:when test="${status.index == 0}">
                                                                <option value="${s.id}">${s.stuNum}-${s.stuName}</option>
                                                            </c:when>
                                                            <c:otherwise>
                                                                <option value="${s.id}">${s.stuNum}-${s.stuName}</option>
                                                            </c:otherwise>
                                                        </c:choose>
                                                    </c:forEach>
                                                </select>
                                            </div>
                                            <div class="input-field col s12">
                                                <label for="certificate_type" style="font-size: 0.8rem;">证书类型</label>
                                                <br>
                                                <br>
                                                <select class="form-control" id="certificate_type" name="certificateType">
                                                    <c:forEach items="${certificateTypes}" var="c" varStatus="s">
                                                        <c:choose>
                                                            <c:when test="${s.index == 0}">
                                                                <option value="${c.certificateType}" selected="selected">${c.certificateType}</option>
                                                            </c:when>
                                                            <c:otherwise>
                                                                <option value="${c.certificateType}">${c.certificateType}</option>
                                                            </c:otherwise>
                                                        </c:choose>

                                                    </c:forEach>
                                                </select>
                                            </div>
                                            <div class="input-field col s12">
                                                <label for="prize_name" style="font-size: 0.8rem;">奖项名称</label>
                                                <br>
                                                <br>
                                                <select class="form-control" id="prize_name" name="prizeName">
                                                    <c:forEach items="${prizeNames}" var="p" varStatus="s">
                                                        <c:choose>
                                                            <c:when test="${s.index == 0}">
                                                                <option value="${p.prizeName}" selected="selected">${p.prizeName}</option>
                                                            </c:when>
                                                            <c:otherwise>
                                                                <option value="${p.prizeName}">${p.prizeName}</option>
                                                            </c:otherwise>
                                                        </c:choose>

                                                    </c:forEach>
                                                </select>
                                            </div>
                                            <div class="input-field col s12">
                                                <label for="prize_grade" style="font-size: 0.8rem;">获奖等级</label>
                                                <br>
                                                <br>
                                                <select class="form-control" id="prize_grade" name="prizeGrade">
                                                    <c:forEach items="${prizeGrades}" var="p" varStatus="s">
                                                        <c:choose>
                                                            <c:when test="${s.index == 0}">
                                                                <option value="${p.prizeGrade}" selected="selected">${p.prizeGrade}</option>
                                                            </c:when>
                                                            <c:otherwise>
                                                                <option value="${p.prizeGrade}">${p.prizeGrade}</option>
                                                            </c:otherwise>
                                                        </c:choose>

                                                    </c:forEach>
                                                </select>
                                            </div>
                                            <div class="input-field col s12">
                                                <label for="prize_level" style="font-size: 0.8rem;">获奖级别</label>
                                                <br>
                                                <br>
                                                <select class="form-control" id="prize_level" name="prizeLevel">
                                                    <c:forEach items="${prizeLevels}" var="p" varStatus="s">
                                                        <c:choose>
                                                            <c:when test="${s.index == 0}">
                                                                <option value="${p.prizeLevel}" selected="selected">${p.prizeLevel}</option>
                                                            </c:when>
                                                            <c:otherwise>
                                                                <option value="${p.prizeLevel}">${p.prizeLevel}</option>
                                                            </c:otherwise>
                                                        </c:choose>
                                                    </c:forEach>
                                                </select>
                                            </div>
                                        </c:otherwise>
                                    </c:choose>
                                    <div class="input-field col s12">
                                        <label for="date" style="font-size: 0.8rem;">获奖时间</label>
                                        <br>
                                        <input id="date" type="text" class="validate" name="prizeTime" readonly/>
                                    </div>
                                    <script>
                                        $('#date').datetimepicker({
                                            language:  'zh-CN',
                                            format: 'yyyy-mm',
                                            autoclose: true,
                                            startView: 'year',
                                            minView:'year',
                                            maxView:'decade',
                                            initialDate: new Date()
                                        });
                                    </script>
                                    <div class="input-field col s12">
                                        <label for="file" style="font-size: 0.8rem;">奖项照片</label>
                                        <br>
                                        <br>
                                        <button type="button" class="btn" onclick="photoChoose()">上传奖项照片</button>
                                        <script>
                                            function photoChoose() {
                                                $('#file').click();
                                            }
                                        </script>
                                        <input id="file" type="file" class="validate" name="file" accept="image/*" style="display: none;"/>
                                        <img class="img-responsive" id="preview">
                                    </div>
                                    <div class="input-field col s12">
                                        <button type="button" class="btn" id="submit" onclick="submitForm()">提交</button>
                                        <script type="text/javascript">

                                            $('#submit').hide();
                                            var input = document.getElementById('file'),
                                                img = document.getElementById('preview'),
                                                blob;

                                            // 监听图片选择图片
                                            input.onchange = function (e) {
                                                var file = e.target.files[0];

                                                if(file){
                                                    EXIF.getData(file, function() {
                                                        // 先获取方向
                                                        var orientation = EXIF.getTag(this, 'Orientation');

                                                        // 回调成功后才能读取图片
                                                        var reader = new FileReader(),
                                                            image = new Image();

                                                        // 使用FileReader读取文件
                                                        reader.onload = function (ev) {
                                                            image.onload = function () {
                                                                var w = this.width,
                                                                    h = this.height;
                                                                // 控制上传图片的宽高
                                                                if(w > h && w > 750){
                                                                    w = 750;
                                                                    h = Math.ceil(750 * this.height / this.width);
                                                                }else if(w < h && h > 1334){
                                                                    w = Math.ceil(1334 * this.width / this.height);
                                                                    h = 1334;
                                                                }

                                                                var canvas = document.createElement("canvas"),
                                                                    ctx = canvas.getContext('2d');
                                                                canvas.width = w;
                                                                canvas.height = h;

                                                                if(orientation && orientation != 1){
                                                                    switch(orientation){
                                                                        // 旋转180度，并且交换宽高
                                                                        case 3:
                                                                            ctx.rotate(Math.PI);
                                                                            ctx.drawImage(this, -w, -h, w, h);
                                                                            break;
                                                                        // 旋转90度
                                                                        case 6:
                                                                            canvas.width = h;
                                                                            canvas.height = w;
                                                                            ctx.rotate(Math.PI / 2);
                                                                            ctx.drawImage(this, 0, -h, w, h);
                                                                            break;
                                                                        // 旋转270度
                                                                        case 8:
                                                                            canvas.width = h;
                                                                            canvas.height = w;
                                                                            ctx.rotate(3 * Math.PI / 2);
                                                                            ctx.drawImage(this, -w, 0, w, h);
                                                                            break;
                                                                    }
                                                                }else{
                                                                    // 不用旋转图片
                                                                    ctx.drawImage(this, 0, 0, w, h);
                                                                }
                                                                // 大于500k，压缩；否则不压缩
                                                                if (file.size / 1024 > 500){
                                                                    img.src = canvas.toDataURL("image/jpeg", 0.5);
                                                                }else {
                                                                    img.src = canvas.toDataURL("image/jpeg", 1);
                                                                }
                                                                // 转换为二进制
                                                                blob = convertBase64UrlToBlob(img.src);
                                                                // 显示上传按钮
                                                                $('#submit').show();
                                                            };
                                                            image.src = ev.target.result;
                                                        };
                                                        reader.readAsDataURL(file);
                                                    });
                                                }
                                            };

                                            function submitForm() {
                                                var formData = new FormData();
                                                var check = true;
                                                var d = $('form').serializeArray();
                                                $.each(d,function () {
                                                    if (this.name != 'id' && $.trim(this.value) == ''){
                                                        alert('请填写完整相关内容');
                                                        check = false;
                                                        return check;
                                                    }else {
                                                        formData.append(this.name,this.value);
                                                    }
                                                });
                                                if (!check){
                                                    return;
                                                }
                                                formData.append("file", blob, "file_"+Date.parse(new Date())+".jpg");
                                                for (var value in formData.values()) {
                                                    console.log(value);
                                                }
                                                $.ajax({
                                                    async:true,
                                                    type:'post',
                                                    url:'/yibinu_certificate/studentPrize/addStudentPrizeInfo',
                                                    data:formData,
                                                    processData:false,
                                                    contentType:false,
                                                    success:function (result) {
                                                        alert('操作成功');
                                                        window.location.href = "list";
                                                    }
                                                });
                                            }

                                            // 将压缩完成之后的base64字符串转换为二进制
                                            function convertBase64UrlToBlob(urlData){
                                                var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
                                                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                                                while(n--){
                                                    u8arr[n] = bstr.charCodeAt(n);
                                                }
                                                return new Blob([u8arr], {type:mime});
                                            }
                                        </script>
                                    </div>
                                </div>
                            </form>
                            <div class="clearBoth"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /. PAGE INNER  -->
    </div>
    <!-- /. PAGE WRAPPER  -->
</div>
<!-- /. WRAPPER  -->
</body>
<script type="text/javascript">

    (function ($) {
        "use strict";
        var mainApp = {

            initFunction: function () {
                /*MENU
                ------------------------------------*/
                $('#main-menu').metisMenu();

                $(window).bind("load resize", function () {
                    if ($(this).width() < 768) {
                        $('div.sidebar-collapse').addClass('collapse')
                    } else {
                        $('div.sidebar-collapse').removeClass('collapse')
                    }
                });
            },

            initialization: function () {
                mainApp.initFunction();

            }

        }
        // Initializing ///

        $(document).ready(function () {
            $(".dropdown-button").dropdown();
            $("#sideNav").click(function(){
                if($(this).hasClass('closed')){
                    $('.navbar-side').animate({left: '0px'});
                    $(this).removeClass('closed');
                    $('#page-wrapper').animate({'margin-left' : '260px'});

                }
                else{
                    $(this).addClass('closed');
                    $('.navbar-side').animate({left: '-260px'});
                    $('#page-wrapper').animate({'margin-left' : '0px'});
                }
            });

            mainApp.initFunction();
        });

        $(".dropdown-button").dropdown();

    }(jQuery));

</script>

</html>